<template>
  <div id="topbar">
    <div class="content">
      <div class="topbar-nav">
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">MIUI</a>
        <span>|</span>
        <a href="">loT</a>
        <span>|</span>
        <a href="">云服务</a>
        <span>|</span>
        <a href="">天星数科</a>
        <span>|</span>
        <a href=""> 有品</a>
        <span>|</span>
        <a href="">小爱开放平台 </a>
        <span>|</span>
        <a href="">企业团购 </a>
        <span>|</span>
        <a href="">资质证照 </a>
        <span>|</span>
        <a href="">协议规则 </a>
        <span>|</span>
        <a href=""> 下载app </a>
        <span>|</span>
        <a href="">智能生活 </a>
        <span>|</span>
        <a href="">Select Location </a>
        <span>|</span>
      </div>
      <div class="topbar-info">
        <router-link to="/login">
          <a href="">登录</a>
        </router-link>
        <span>|</span>
        <router-link to="/register">
          <a href="">注册</a>
        </router-link>
        <span>|</span>
        <a href="">消息通知</a>
      </div>
      <div class="tobar-cart">
        <a href="">购物车</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
// * {
//   margin: 0;
//   padding: 0;
//   list-style: none;
//   text-decoration: none;
// }
#topbar {
  width: 100%;
  height: 40px;
  background-color: #333333;
  font-size: 12px;
  display: flex;
  align-items: center;

  .content {
    width: 1226px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;

    a {
      color: #cccccc;
      &:hover {
        color: white;
      }
    }
    span {
      color: #9f9f9f;
      margin: 5px;
    }
  }
}
</style>